<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>

<body>
    <script>
        /*
            js中事件
                dom0  
                    dom.onclick = function(){}
                    dom.onclick = function(){}
                        <button onclick="fn()">
                dom2  dom.addEventListener('click',function(){})            
            jq中事件
                   $().click(function(){

                   })    
                    $().click(function(){
                    
                   }) 
                   
                   $().on('click',function(){})
                   $('ul').on('click','.del',function(){})
        
        */


    </script>

    <button class="btn">按钮</button>

    <div>
        <button class="item">按钮1</button>
        <button class="item">按钮2</button>
    </div>

    <div id="box">

    </div>

    <ul>
        <li>
            <p>22</p>
            <button class="del">删除</button>
        </li>
        <li>
            <p>33</p>
            <button class="del">删除</button>
        </li>
    </ul>

    <button id="btn">按钮</button>
    <script>
        $('.btn').click(function (evt) {
            console.log('click btn1');
            console.log(evt);//事件对象
            console.log(this);//给谁添加的this，this就是--dom元素

            // this.css 
            // $(this).css('color', 'red')

        })
        // $('button').click(function () {
        //     console.log('click btn2');
        // })

        // 给所有选中元素 都添加了点击事件--内置循环
        // $('.item').click(function () {
        //     console.log('点击了item');

        //     this//点击的按钮-dom元素
        //     $('.item').css('color', '')
        //     $(this).css('color', 'red')
        // })

        $('.item').click(function () {
            console.log('点击了item');

            this//点击的按钮-dom元素

            // $(this).css('color', 'red')-> 返回的是伪数组本身

            $(this).css('color', 'red').siblings().css('color', '')

            // 获取元素 在同辈中下标
            let index = $(this).index()
            console.log(index);
        })

        // $('#box').mousemove(function (e) {
        //     console.log('move');
        //     console.log(e.offsetX, e.offsetY);
        // })

        // $('#box').hover(function () {
        //     console.log('移入');
        // }, function () {
        //     console.log('移出');
        // })

        // document.addEventListener('click',function(){})
        let fn = function () {
            console.log('点击了box1');
        }
        // 添加事件
        $('#box').on('click', fn)

        // $('#box').on('click', function () {
        //     console.log('点击了box2');
        // })

        // 移除事件
        // $('#box').off('click', fn)


        // 事件委托--给父元素添加事件-利用事件冒泡的特点
        // let ul = document.querySelector('ul')
        // ul.onclick = function (evt) {
        //     if (evt.target.className == 'del') {
        //         console.log('点击了删除');
        //     }
        // }

        // 事件委托--
        $('ul').on('click', '.del', function () {
            console.log('点了del');
            console.log(this);//--事件源
        })


        setTimeout(() => {
            // 通知所有的观察者--主动出发click事件
            $('.del').eq(0).trigger('click')
        }, 2000);


        // 一次性事件
        $('#btn').one('click', function () {
            console.log('btn click');
        })



    </script>

</body>

</html>